<template>
  <div class="math-learning">
    <div class="header">
      <h1>📐 初一数学知识点复习</h1>
      <p>系统复习初一数学重要知识点，掌握易错点和重点难点</p>
    </div>

    <!-- 导航标签 -->
    <div class="nav-tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="['tab-btn', { active: activeTab === tab.id }]"
        @click="activeTab = tab.id"
      >
        {{ tab.name }}
      </button>
    </div>

    <!-- 知识点概览 -->
    <div v-if="activeTab === 'overview'" class="overview-section">
      <div class="stats-grid">
        <div class="stat-card">
          <h3>📚 总知识点</h3>
          <div class="stat-number">{{ mathTopics.length }}</div>
          <p>涵盖数与代数、图形与几何、统计与概率</p>
        </div>
        <div class="stat-card">
          <h3>❌ 错题数量</h3>
          <div class="stat-number">{{ mistakeBook.getMistakes().length }}</div>
          <p>需要重点复习的题目</p>
        </div>
        <div class="stat-card">
          <h3>🎯 易错点</h3>
          <div class="stat-number">{{ totalCommonMistakes }}</div>
          <p>常见错误类型</p>
        </div>
        <div class="stat-card">
          <h3>⭐ 重点难点</h3>
          <div class="stat-number">{{ difficultTopics.length }}</div>
          <p>需要重点掌握的内容</p>
        </div>
      </div>

      <div class="categories-section">
        <h2>📖 知识点分类</h2>
        <div class="category-grid">
          <div 
            v-for="category in categories" 
            :key="category"
            class="category-card"
            @click="filterByCategory(category)"
          >
            <h3>{{ category }}</h3>
            <div class="topic-count">{{ getTopicsByCategory(category).length }}个知识点</div>
            <div class="difficulty-distribution">
              <span v-for="i in 3" :key="i" class="star">⭐</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 知识点列表 -->
    <div v-if="activeTab === 'topics'" class="topics-section">
      <div class="filter-bar">
        <select v-model="selectedCategory" @change="filterTopics">
          <option value="">所有类别</option>
          <option v-for="category in categories" :key="category" :value="category">
            {{ category }}
          </option>
        </select>
        <select v-model="selectedDifficulty" @change="filterTopics">
          <option value="">所有难度</option>
          <option value="1">⭐ 简单</option>
          <option value="2">⭐⭐ 中等</option>
          <option value="3">⭐⭐⭐ 困难</option>
        </select>
      </div>

      <div class="topics-grid">
        <div 
          v-for="topic in filteredTopics" 
          :key="topic.id"
          class="topic-card"
        >
          <div class="topic-header">
            <h3>{{ topic.name }}</h3>
            <div class="difficulty">
              <span v-for="i in topic.difficulty" :key="i">⭐</span>
            </div>
          </div>
          <p class="topic-description">{{ topic.description }}</p>
          <div class="topic-stats">
            <span class="category-tag">{{ topic.category }}</span>
            <span class="key-points-count">{{ topic.keyPoints.length }}个要点</span>
          </div>
          <div class="topic-actions">
            <button class="btn-primary" @click="startPractice(topic)">开始练习</button>
            <button class="btn-secondary" @click="viewDetails(topic)">查看详情</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 易错点练习 -->
    <div v-if="activeTab === 'mistakes'" class="mistakes-section">
      <div class="mistakes-overview">
        <h2>❌ 易错点专项练习</h2>
        <p>针对常见错误进行专项训练，提高解题准确性</p>
      </div>

      <div class="mistakes-grid">
        <div 
          v-for="topic in mathTopics" 
          :key="topic.id"
          class="mistake-topic-card"
        >
          <h3>{{ topic.name }}</h3>
          <div class="mistakes-list">
            <div 
              v-for="(mistake, index) in topic.commonMistakes" 
              :key="index"
              class="mistake-item"
            >
              <span class="mistake-icon">⚠️</span>
              <span class="mistake-text">{{ mistake }}</span>
            </div>
          </div>
          <button class="btn-primary" @click="practiceMistakes(topic)">
            练习易错点 ({{ topic.commonMistakes.length }})
          </button>
        </div>
      </div>
    </div>

    <!-- 错题本 -->
    <div v-if="activeTab === 'mistakebook'" class="mistakebook-section">
      <div class="mistakebook-header">
        <h2>📝 错题本</h2>
        <div class="mistakebook-stats">
          <span>总错题: {{ mistakeBook.getMistakes().length }}</span>
          <span>已复习: {{ reviewedMistakes }}</span>
          <span>待复习: {{ unreviewedMistakes }}</span>
        </div>
      </div>

      <div v-if="mistakeBook.getMistakes().length === 0" class="empty-mistakebook">
        <div class="empty-icon">📚</div>
        <h3>错题本还是空的</h3>
        <p>开始练习后，做错的题目会自动添加到错题本中</p>
        <button class="btn-primary" @click="activeTab = 'topics'">开始练习</button>
      </div>

      <div v-else class="mistakes-list">
        <div 
          v-for="mistake in mistakeBook.getMistakes()" 
          :key="mistake.id"
          class="mistake-card"
          :class="{ reviewed: mistake.reviewed }"
        >
          <div class="mistake-header">
            <span class="topic-name">{{ getTopicName(mistake.topicId) }}</span>
            <span class="mistake-date">{{ formatDate(mistake.date) }}</span>
            <div class="mistake-actions">
              <button 
                v-if="!mistake.reviewed" 
                class="btn-small"
                @click="markAsReviewed(mistake.id)"
              >
                标记已复习
              </button>
              <button 
                class="btn-small btn-danger"
                @click="removeMistake(mistake.id)"
              >
                删除
              </button>
            </div>
          </div>
          <div class="mistake-content">
            <div class="question">
              <strong>题目：</strong>{{ mistake.question }}
            </div>
            <div class="answers">
              <div class="user-answer">
                <strong>你的答案：</strong>
                <span class="wrong">{{ mistake.userAnswer }}</span>
              </div>
              <div class="correct-answer">
                <strong>正确答案：</strong>
                <span class="correct">{{ mistake.correctAnswer }}</span>
              </div>
            </div>
            <div class="explanation">
              <strong>解析：</strong>{{ mistake.explanation }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 练习模式 -->
    <div v-if="activeTab === 'practice'" class="practice-section">
      <div v-if="!currentTopic" class="practice-selection">
        <h2>🎯 选择练习内容</h2>
        <div class="practice-options">
          <div class="practice-option" @click="startTopicPractice()">
            <h3>📚 知识点练习</h3>
            <p>系统练习各个知识点</p>
          </div>
          <div class="practice-option" @click="startMistakePractice()">
            <h3>❌ 易错点练习</h3>
            <p>专项练习常见错误</p>
          </div>
          <div class="practice-option" @click="startMistakebookPractice()">
            <h3>📝 错题本练习</h3>
            <p>复习做错的题目</p>
          </div>
        </div>
      </div>

      <div v-else class="practice-interface">
        <div class="practice-header">
          <h2>{{ currentTopic.name }} - 练习</h2>
          <div class="progress">
            第 {{ currentQuestionIndex + 1 }} 题 / 共 {{ questions.length }} 题
          </div>
        </div>

        <div v-if="currentQuestion" class="question-card">
          <div class="question-content">
            <h3>{{ currentQuestion.question }}</h3>
          </div>

          <div class="answer-input">
            <input 
              v-model="userAnswer" 
              type="text" 
              placeholder="请输入你的答案"
              @keyup.enter="submitAnswer"
            />
            <button class="btn-primary" @click="submitAnswer">提交答案</button>
          </div>

          <div v-if="showResult" class="result-display">
            <div :class="['result', { correct: isCorrect, incorrect: !isCorrect }]">
              <div class="result-icon">
                {{ isCorrect ? '✅' : '❌' }}
              </div>
              <div class="result-text">
                <div v-if="isCorrect" class="correct-message">回答正确！</div>
                <div v-else class="incorrect-message">
                  回答错误。正确答案是：{{ currentQuestion.answer }}
                </div>
              </div>
            </div>
            <div class="explanation">
              <strong>解析：</strong>{{ currentQuestion.explanation }}
            </div>
            <button class="btn-primary" @click="nextQuestion">下一题</button>
          </div>
        </div>

        <div class="practice-stats">
          <div class="stat">
            <span>正确：{{ correctCount }}</span>
          </div>
          <div class="stat">
            <span>错误：{{ wrongCount }}</span>
          </div>
          <div class="stat">
            <span>正确率：{{ accuracy }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 知识点详情模态框 -->
    <div v-if="showTopicModal" class="modal-overlay" @click="closeTopicModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2>{{ selectedTopic.name }}</h2>
          <button class="close-btn" @click="closeTopicModal">×</button>
        </div>
        <div class="modal-body">
          <div class="topic-info">
            <p><strong>类别：</strong>{{ selectedTopic.category }}</p>
            <p><strong>难度：</strong>
              <span v-for="i in selectedTopic.difficulty" :key="i">⭐</span>
            </p>
            <p><strong>描述：</strong>{{ selectedTopic.description }}</p>
          </div>

          <div class="key-points">
            <h3>📋 重点要点</h3>
            <ul>
              <li v-for="point in selectedTopic.keyPoints" :key="point">{{ point }}</li>
            </ul>
          </div>

          <div class="common-mistakes">
            <h3>⚠️ 常见错误</h3>
            <ul>
              <li v-for="mistake in selectedTopic.commonMistakes" :key="mistake">{{ mistake }}</li>
            </ul>
          </div>

          <div class="examples">
            <h3>💡 例题</h3>
            <div v-for="example in selectedTopic.examples" :key="example.question" class="example">
              <div class="example-question">
                <strong>题目：</strong>{{ example.question }}
              </div>
              <div class="example-answer">
                <strong>答案：</strong>{{ example.answer }}
              </div>
              <div class="example-explanation">
                <strong>解析：</strong>{{ example.explanation }}
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-primary" @click="startPractice(selectedTopic)">开始练习</button>
          <button class="btn-secondary" @click="closeTopicModal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getAllMathTopics, 
  getMathCategories, 
  getMathTopicsByCategory,
  getRandomPracticeQuestions,
  getCommonMistakeQuestions,
  mistakeBook
} from '../data/mathData.js'

export default {
  name: 'MathLearning',
  data() {
    return {
      activeTab: 'overview',
      tabs: [
        { id: 'overview', name: '📊 概览' },
        { id: 'topics', name: '📚 知识点' },
        { id: 'mistakes', name: '❌ 易错点' },
        { id: 'mistakebook', name: '📝 错题本' },
        { id: 'practice', name: '🎯 练习' }
      ],
      mathTopics: [],
      categories: [],
      selectedCategory: '',
      selectedDifficulty: '',
      filteredTopics: [],
      showTopicModal: false,
      selectedTopic: null,
      currentTopic: null,
      questions: [],
      currentQuestionIndex: 0,
      currentQuestion: null,
      userAnswer: '',
      showResult: false,
      isCorrect: false,
      correctCount: 0,
      wrongCount: 0,
      mistakeBook: mistakeBook
    }
  },
  computed: {
    totalCommonMistakes() {
      return this.mathTopics.reduce((total, topic) => total + topic.commonMistakes.length, 0)
    },
    difficultTopics() {
      return this.mathTopics.filter(topic => topic.difficulty >= 3)
    },
    reviewedMistakes() {
      return this.mistakeBook.getMistakes().filter(m => m.reviewed).length
    },
    unreviewedMistakes() {
      return this.mistakeBook.getMistakes().filter(m => !m.reviewed).length
    },
    accuracy() {
      const total = this.correctCount + this.wrongCount
      return total > 0 ? Math.round((this.correctCount / total) * 100) : 0
    }
  },
  watch: {
    activeTab(newTab) {
      if (newTab === 'topics') {
        this.filterTopics()
      }
      if (newTab === 'overview') {
        this.filteredTopics = [...this.mathTopics]
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      try {
        this.mathTopics = getAllMathTopics()
        this.categories = getMathCategories()
        this.filteredTopics = [...this.mathTopics]
        console.log('数据加载成功:', this.mathTopics.length, '个知识点')
      } catch (error) {
        console.error('数据加载失败:', error)
        this.mathTopics = []
        this.categories = []
        this.filteredTopics = []
      }
    },
    filterByCategory(category) {
      this.selectedCategory = category
      this.activeTab = 'topics'
      this.filterTopics()
    },
    filterTopics() {
      let filtered = [...this.mathTopics]
      if (this.selectedCategory) {
        filtered = filtered.filter(topic => topic.category === this.selectedCategory)
      }
      if (this.selectedDifficulty) {
        filtered = filtered.filter(topic => topic.difficulty === parseInt(this.selectedDifficulty))
      }
      this.filteredTopics = filtered
    },
    getTopicsByCategory(category) {
      return getMathTopicsByCategory(category)
    },
    selectTopic(topic) {
      this.selectedTopic = topic
      this.showTopicModal = true
    },
    closeTopicModal() {
      this.showTopicModal = false
      this.selectedTopic = null
    },
    viewDetails(topic) {
      this.selectTopic(topic)
    },
    startPractice(topic) {
      this.currentTopic = topic
      this.questions = getRandomPracticeQuestions(topic.id, 10)
      this.currentQuestionIndex = 0
      this.currentQuestion = this.questions[0]
      this.userAnswer = ''
      this.showResult = false
      this.correctCount = 0
      this.wrongCount = 0
      this.activeTab = 'practice'
    },
    practiceMistakes(topic) {
      this.currentTopic = topic
      this.questions = getCommonMistakeQuestions(topic.id)
      this.currentQuestionIndex = 0
      this.currentQuestion = this.questions[0]
      this.userAnswer = ''
      this.showResult = false
      this.correctCount = 0
      this.wrongCount = 0
      this.activeTab = 'practice'
    },
    startTopicPractice() {
      this.currentTopic = null
      this.questions = []
      this.mathTopics.forEach(topic => {
        this.questions.push(...getRandomPracticeQuestions(topic.id, 2))
      })
      this.currentQuestionIndex = 0
      this.currentQuestion = this.questions[0]
      this.userAnswer = ''
      this.showResult = false
      this.correctCount = 0
      this.wrongCount = 0
    },
    startMistakePractice() {
      this.currentTopic = null
      this.questions = []
      this.mathTopics.forEach(topic => {
        this.questions.push(...getCommonMistakeQuestions(topic.id))
      })
      this.currentQuestionIndex = 0
      this.currentQuestion = this.questions[0]
      this.userAnswer = ''
      this.showResult = false
      this.correctCount = 0
      this.wrongCount = 0
    },
    startMistakebookPractice() {
      const mistakes = this.mistakeBook.getMistakes()
      if (mistakes.length === 0) {
        alert('错题本为空，请先做练习')
        return
      }
      this.currentTopic = null
      this.questions = mistakes.map(mistake => ({
        id: mistake.id,
        question: mistake.question,
        answer: mistake.correctAnswer,
        explanation: mistake.explanation,
        topicId: mistake.topicId
      }))
      this.currentQuestionIndex = 0
      this.currentQuestion = this.questions[0]
      this.userAnswer = ''
      this.showResult = false
      this.correctCount = 0
      this.wrongCount = 0
    },
    submitAnswer() {
      if (!this.userAnswer.trim()) return

      this.isCorrect = this.userAnswer.trim() === this.currentQuestion.answer
      
      if (this.isCorrect) {
        this.correctCount++
      } else {
        this.wrongCount++
        // 添加到错题本
        this.mistakeBook.addMistake(
          this.currentQuestion.topicId,
          this.currentQuestion.question,
          this.userAnswer,
          this.currentQuestion.answer,
          this.currentQuestion.explanation
        )
      }

      this.showResult = true
    },
    nextQuestion() {
      this.currentQuestionIndex++
      if (this.currentQuestionIndex < this.questions.length) {
        this.currentQuestion = this.questions[this.currentQuestionIndex]
        this.userAnswer = ''
        this.showResult = false
      } else {
        // 练习完成
        alert(`练习完成！正确率：${this.accuracy}%`)
        this.activeTab = 'overview'
      }
    },
    getTopicName(topicId) {
      const topic = this.mathTopics.find(t => t.id === topicId)
      return topic ? topic.name : '未知'
    },
    formatDate(dateString) {
      return new Date(dateString).toLocaleDateString()
    },
    markAsReviewed(id) {
      this.mistakeBook.markAsReviewed(id)
    },
    removeMistake(id) {
      if (confirm('确定要删除这道错题吗？')) {
        this.mistakeBook.removeMistake(id)
      }
    }
  }
}
</script>

<style scoped>
.math-learning {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  color: #2c3e50;
  font-size: 2.5em;
  margin-bottom: 10px;
}

.header p {
  color: #7f8c8d;
  font-size: 1.2em;
}

.nav-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 5px;
}

.tab-btn {
  padding: 12px 24px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1em;
  transition: all 0.3s ease;
}

.tab-btn.active {
  background: #3498db;
  color: white;
}

.tab-btn:hover {
  background: #2980b9;
  color: white;
}

/* 概览部分 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-number {
  font-size: 3em;
  font-weight: bold;
  color: #3498db;
  margin: 10px 0;
}

.categories-section {
  margin-top: 40px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.category-card {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  color: white;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-card:hover {
  transform: scale(1.05);
}

/* 知识点部分 */
.filter-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.filter-bar select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1em;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.topic-card {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.topic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.topic-description {
  color: #7f8c8d;
  margin-bottom: 15px;
}

.topic-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.category-tag {
  background: #e8f4fd;
  color: #3498db;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 0.9em;
}

.topic-actions {
  display: flex;
  gap: 10px;
}

/* 易错点部分 */
.mistakes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.mistake-topic-card {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.mistakes-list {
  margin: 15px 0;
}

.mistake-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
  padding: 10px;
  background: #fff3cd;
  border-radius: 8px;
}

.mistake-icon {
  margin-right: 10px;
}

/* 错题本部分 */
.mistakebook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.mistakebook-stats {
  display: flex;
  gap: 20px;
}

.empty-mistakebook {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 4em;
  margin-bottom: 20px;
}

.mistakes-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mistake-card {
  background: white;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-left: 5px solid #e74c3c;
}

.mistake-card.reviewed {
  border-left-color: #27ae60;
  opacity: 0.7;
}

.mistake-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.mistake-actions {
  display: flex;
  gap: 10px;
}

.mistake-content {
  line-height: 1.6;
}

.answers {
  margin: 15px 0;
}

.user-answer, .correct-answer {
  margin: 10px 0;
}

.wrong {
  color: #e74c3c;
  font-weight: bold;
}

.correct {
  color: #27ae60;
  font-weight: bold;
}

/* 练习部分 */
.practice-selection {
  text-align: center;
  padding: 40px 20px;
}

.practice-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.practice-option {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.practice-option:hover {
  transform: translateY(-5px);
}

.practice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.question-card {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.answer-input {
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.answer-input input {
  flex: 1;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 1em;
}

.result-display {
  margin-top: 20px;
  padding: 20px;
  border-radius: 10px;
}

.result {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.result.correct {
  background: #d4edda;
  color: #155724;
}

.result.incorrect {
  background: #f8d7da;
  color: #721c24;
}

.result-icon {
  font-size: 2em;
  margin-right: 15px;
}

.practice-stats {
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 15px;
  max-width: 800px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2em;
  cursor: pointer;
  color: #999;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 按钮样式 */
.btn-primary {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.3s ease;
}

.btn-primary:hover {
  background: #2980b9;
}

.btn-secondary {
  background: #95a5a6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1em;
  transition: background 0.3s ease;
}

.btn-secondary:hover {
  background: #7f8c8d;
}

.btn-small {
  padding: 5px 10px;
  font-size: 0.9em;
}

.btn-danger {
  background: #e74c3c;
}

.btn-danger:hover {
  background: #c0392b;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-tabs {
    flex-wrap: wrap;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .topics-grid {
    grid-template-columns: 1fr;
  }
  
  .practice-options {
    grid-template-columns: 1fr;
  }
  
  .answer-input {
    flex-direction: column;
  }
}
</style> 